<!-- 倒计时计数器组件 -->
<template>
    <div>
        <!-- 时间到了的提示音频 -->
        <audio id="myAudio" controls style="display: none;">
            <source id="mp3Source" src="" type="audio/mpeg">
        </audio>

        <div id="counter" @mouseenter="showWindow()" @mouseleave="hiddenWindow()">
            <div id="time-header" class="isshowed-area">
                <div @click="minMainWindow()"><i class="el-icon-minus"></i></div>
                <div @click="closeMainWindow()"><i class="el-icon-close"></i></div>
            </div>
            <div id="time-showed">
                <!-- <span>{{ showedHour }} : </span> -->
                <span>{{ showedMinute }} : </span>
                <span>{{ showedSecond }}</span>
            </div>
            <div id="time-settings" class="isshowed-area">
                <el-button v-if="isRing" type="warning" icon="el-icon-bell" @click="changeIsRing()" circle style="max-width: 36px; max-height:36px; width: 20vh; height: 20vh; text-align: center; padding: 0;"></el-button>
                <el-button v-else type="danger" icon="el-icon-close-notification" @click="changeIsRing()" circle style="max-width: 36px; max-height:36px; width: 20vh; height: 20vh; text-align: center; padding: 0;"></el-button>
                <el-button v-if="isTime" type="danger" icon="el-icon-video-pause" @click="pause()" circle style="max-width: 36px; max-height:36px; width: 20vh; height: 20vh; text-align: center; padding: 0;"></el-button>
                <el-button v-else type="primary" icon="el-icon-video-play" @click="start()" circle style="max-width: 36px; max-height:36px; width: 20vh; height: 20vh; text-align: center; padding: 0;" ></el-button>
                <el-button v-if="isShowTimeEraser" type="warning" icon="el-icon-refresh-left" @click="restart()" circle style="max-width: 36px; max-height:36px; width: 20vh; height: 20vh; text-align: center; padding: 0;"></el-button>
                <el-button v-else type="primary" plain icon="el-icon-setting" @click="openNewWindow()" circle style="max-width: 36px; max-height:36px; width: 20vh; height: 20vh; text-align: center; padding: 0;"></el-button>
            </div>
        </div>

    </div>
</template>

<script>
import { readTimeInfo, readAlramsInfo, readThemeColor, clearTimeInfo, clearWindowsSizeInfo, clearAlarmsInfo, readResetStatus, clearThemeColor } from '../../shared/utils/storage.js'
export default {
    data() {
        return {
            minute: 0,
            second: 0,
            showedHour: '00',         // 显示的小时
            showedMinute: '00',       // 显示的分钟
            showedSecond: '00',       // 显示的秒钟
            intervalId: '',           // 计时器id
            isTime: false,            // 是否计时
            isShowTimeEraser: false,  // 是否显示时间清除器
            mp3SourceResolve: '',     // mp3资源绝对路径
            isRing: true,             // 是否响铃
            isAutoReset: true,        // 倒计时结束是否自动重置
        }
    },
    mounted() {
        this.isAutoReset = readResetStatus()
        this.readTime()
        this.setShowedTime()
        this.setThemeColor()
    },
    methods: {
        // 设置主题色
        setThemeColor() {
            const themeColor = readThemeColor()
            var element = document.getElementById('time-showed')
            element.style.color = themeColor
        },
        // 关闭主窗口
        closeMainWindow() {
            clearTimeInfo()
            clearWindowsSizeInfo()
            clearAlarmsInfo()
            clearThemeColor()
            clearInterval(this.intervalId)
            window.myApi.closeMainWindow()
        },
        // 最小化主窗口
        minMainWindow() {
            window.myApi.minMainWindow()
        },
        // 鼠标移入显示背景
        showWindow() {
            let areas = document.getElementsByClassName('isshowed-area')
            for (let i = 0; i < areas.length; i++) {
                areas[i].style.visibility = 'visible'        
            }
            let counter = document.getElementById('counter')
            counter.style.backgroundColor = 'rgba(118, 117, 117, 0.224)'
        },
        // 鼠标移出隐藏背景
        hiddenWindow() {
            let areas = document.getElementsByClassName('isshowed-area')
            for (let i = 0; i < areas.length; i++) {
                areas[i].style.visibility = 'hidden'        
            }
            let counter = document.getElementById('counter')
            counter.style.backgroundColor='transparent'
        },
        // 获取本地存储的数据
        readTime() {
            const form =  readTimeInfo()
            // this.hour = form.hour
            this.minute = form.minute
            this.second = form.second
        },
        // 处理时间的改变
        handleTimeChange(form) {
            // this.hour = form.hour
            this.minute = form.minute
            this.second = form.second
            this.setShowedTime()
            console.log(form)
        },
        // 设置显示的字符串时间
        setShowedTime() {
            // this.showedHour = this.formatNumTime(this.hour)
            this.showedMinute = this.formatNumTime(this.minute)
            this.showedSecond = this.formatNumTime(this.second)
        },
        // 格式化字符串数字输出
        formatNumTime(num) {        
            if (num < 10) {
                return '0' + num
            }
            return num + ''
        },
        // 切换是否响铃
        changeIsRing() {
            this.isRing = !this.isRing
        },
        // 判断是否播放音频
        isPlayMp3() {
            const alramsInfo = readAlramsInfo()
            for (let i = 0; i < alramsInfo.length; i++) {
                if (this.minute == alramsInfo[i].minute && this.second == alramsInfo[i].second + 1) {
                    this.mp3SourceResolve = alramsInfo[i].fileResolve
                    return true
                }
            }
            return false
        },
        // 播放音频
        async playMp3() {
            var audioElement = document.getElementById("myAudio")
            var sourceElement = document.getElementById("mp3Source")
            const dataUrl = await window.myApi.readMp3FileToDataUrlByResolve(this.mp3SourceResolve)
            sourceElement.src = dataUrl 
            audioElement.load()
            audioElement.play()
        },
        // 倒计时 
        countdown() {
            if (this.isPlayMp3() && this.isRing) {
                this.playMp3()
            }
            if (this.minute === 0 && this.second === 0) {
                clearInterval(this.intervalId)
                if (this.isAutoReset) {
                    this.restart()
                } 
                return
            }
            if (this.second === 0) {
                // if (this.minute === 0) {
                //     this.hour = this.hour - 1
                //     this.minute = 59
                // } else {
                    this.minute = this.minute - 1
                // }
                this.second = 59
            } else {
                this.second = this.second - 1
            }
            this.setShowedTime()
        },
        // 开始倒计时
        start() {
            this.intervalId = setInterval(this.countdown, 1000)
            this.isTime = true
            this.isShowTimeEraser = true
        },
        // 暂停倒计时
        pause() {
            clearInterval(this.intervalId)
            this.isTime = false
        },
        // 重新开始计时
        restart() {
            this.readTime()
            this.pause()
            this.setShowedTime()
            this.isShowTimeEraser = false
        },
        // 设置倒计时时间
        openNewWindow() {
            window.myApi.createNewWindow()
        }
    }
}
</script>

<style scoped>
    * {
        margin: 0;
        padding: 0;
    }

    #counter {
        /* margin-bottom: 1vh; */
        width: 100%;
        height:98%;
        user-select: none;
        /* -webkit-app-region: drag; */
    }

    /* 头部样式 */
    #time-header {
        padding-top: 1vh;
        display: flex;
        justify-content: right;
        height: 10vh;
        width: 100%;
        /* background-color: aliceblue; */
    }
    #time-header > div {
        display: inline-block;
        margin-right: 10px;
        cursor: pointer;
    }

    /* 数字显示样式 */
    #time-showed {
        text-align: center;
        /* line-height: 52vh; */
        font-size: calc(100vw * 370 / 1920);    /* 字体大小自适应 */
        color: rgba(239, 238, 238, 0.87);
        -webkit-app-region: drag;
        /* background-color: none; */
    }

    /* 倒计时下面设置区域样式 */
    #time-settings {
        /* visibility: hidden; */
        display: flex;
        justify-content: center;     /* 水平居中 */
        align-items: center;         /* 垂直居中 */
        height: 21vh;
    }

    /* 控制是否显示 */
    .isshowed-area {
        visibility: hidden;
    }

</style>